<template>
    <div style="background-color:white;height:100%">
        <v-container style="margin-top:5%">
        <v-layout row wrap text-xs-center justify-center align-center>
            <v-flex text-xs-center><h1 style="color:#4caf50">COMMUNITY</h1></v-flex>
            <v-flex xs10 text-xs-center>
                <v-text-field label="用户名" v-model="userName" required style="margin-top:8%;width:100%"></v-text-field>
            </v-flex>
            <v-flex xs10>
                <v-text-field label="真实姓名" v-model="name" required style="margin-top:5%;width:100%"></v-text-field>
            </v-flex>
            <v-flex xs10>
                <v-text-field label="密码" required type="password" v-model="password" style="margin-top:5%;width:100%"></v-text-field>
            </v-flex>
            <v-flex xs10>
                <v-text-field label="确认密码" required type="password" v-model="confirmPW" style="margin-top:5%;width:100%"></v-text-field>
            </v-flex>
            <v-flex xs10 d-flex>
                <v-select
                    :items="sex"
                    v-model="userSex"
                    label="请选择性别"
                ></v-select>
            </v-flex>  
            <v-flex xs10>
                <v-text-field label="手机号码" required v-model="phoneNum" style="margin-top:5%;width:100%" type="number" onkeyup="if(this.value.length>11){this.value=this.value.slice(0,11)}"></v-text-field>
            </v-flex>
            <v-flex xs10 d-flex>
                <v-select
                    :items="communities_name"
                    v-model="community"
                    label="请选择所在小区"
                ></v-select>
            </v-flex>
            <v-flex style="float:left;margin-top:5%">
                <v-btn @click="goBack()" style="margin-left:9%;width:70%">返回</v-btn>
            </v-flex>
            <v-flex style="float:right;margin-top:5%">
                <v-btn @click="register()" style="margin-right:0;width:70%" color="primary">确定</v-btn>
            </v-flex>
          
        </v-layout>    
        </v-container>
    </div>
</template>

<script>
export default {
    name:'register',
    
    data(){
        return{

            publicKey:'',
            communities:[],
            communities_name:[],
            userName:'',
            name:'',
            password:'',
            confirmPW:'',
            phoneNum:'',
            community:'',
            userSex:'',

            sex:['男','女'],
        }
    },

    methods:{

        getPublickKey(){ //从后台获得公钥

            this.$axios.get('/users/toRegister')
                .then(function(response){
                    console.log(response);
                    if(JSON.parse(response.data).meta.success==true){
                        this.publicKey=JSON.parse(response.data).data;
                        console.log(this.publicKey);
                        this.getAllCommunities();
                    }
                })
                .catch(function(error){
                    console.log(error);
                })

        },

        getRSApassword(){ //公钥加密
            //实例化一个JSEncrypt对象
            let jse=new this.$jsEncrypt.JSEncrypt();
            jse.setPublickKey(this.publicKey);
            //设置需要加密的字符串
            let encrypted=jse.encrypt(this.password);
            return encrypted;
        },

        getAllCommunities(){ //从后台获取所有小区信息

            this.$axios.get('/communities')
                .then(function(response){
                    console.log(response);
                    if(JSON.parse(response.data).meta.success==true){

                        this.communities=JSON.parse(response.data).data;
                        console.log(this.communities);
                        this.getCommunitiesName();
                    }else{
                        console.log("get all communities fails ");
                    }
                })
                .catch(function(error){
                    console.log(error);
                })
        },

        getCommunitiesName(){ //获得所有小区名字组成select下拉框的items数组

            this.communities.forEach(function(element) {
                this.communities_name.push(element.communityName);
            }, this);


        },

        postInfo(){ //向后台发送post请求

            var temp=null;
            for(var i=0;i<this.communities.length;i++){
                if(this.communities[i].communitiesName==this.community){
                    temp=element;
                    break;
                }
            }

            var formdata=new FormData();
            formdata.append("communityId",temp.communityId);
            formdata.append("userName",this.userName);
            formdata.append("userType",0);
            formdata.append("userSex",this.userSex);
            formdata.append("userPhone",this.phoneNum);
            formdata.append("username",this.name);
            formdata.append("password",this.getRSApassword());

            this.$axios.post('/users/register',formdata)
                .then(function(response){
                    //成功后跳转至login页面
                    if(JSON.parse(response.data).meta.success==true){
                        alert("注册成功！");
                        localStorage.setItem('Access-Token',JSON.parse(response.data)['Access-Token']);
                        localStorage.setItem('Refresh-Token',JSON.parse(response.data)['Refresh-Token']);
                        this.$router.push('home');
                    }else{
                        alert(JSON.parse(response.data).meta.message);
                    }
                })
                .catch(function(error){
                    console.log(error);
                })
        },

        register(){
            
            if(this.userName==''){
                alert("用户名不能为空！");
                return;
            }else if(this.name==''){
                alert("真实姓名不能为空！");
                return;
            }else if(this.password==''){
                alert("密码不能为空！");
                return;
            }else if(this.password!=this.confirmPW){
                alert("两次密码输入不一致！");
                return;
            }else if(this.userSex==''){
                alert('性别不能为空！');
                return;
            }else if(this.phoneNum==''){
                alert("联系电话不能为空！");
                return;
            }else if(this.community==''){
                alert("小区不能为空！");
                return;
            }


            //this.postInfo();
        },

        goBack(){
            this.$router.back(-1) 
        }
    },

    mounted(){
        //this.getPublickKey() ;
    }
}
</script>